<template>
  <div class="homepage">
    <!-- <div class="nav">
        <div class="nav-left">
          <img src="./logo.png"/>
          <div></div>
          <img src="./招采平台系统.png"/>
        </div>
        <div class="nav-right">
          <img :src="require('' + userInfo.img)" class="nav-right-img"/>
          <span class="nav-right-name">欢迎你，{{userInfo.name}}</span>
          <div class="nav-right-middleline"></div>
          <div class="nav-right-operation">
            <a-menu class="nav-right-menu" v-model="current" mode="horizontal">
                <a-sub-menu>
                  <span slot="title" class="">
                    <a-icon type="setting" />退出登录</span>
                      <a-menu-item key="setting:1">
                        Option 1
                      </a-menu-item>
                      <a-menu-item key="setting:2">
                        Option 2
                      </a-menu-item>
                      <a-menu-item key="setting:3">
                        Option 3
                      </a-menu-item>
                      <a-menu-item key="setting:4">
                        Option 4
                      </a-menu-item>
                </a-sub-menu>
            </a-menu>
          </div>
        </div>
      </div> -->
    <div class="content">
      <!-- <div class="leftMenu">
          <a-menu mode="inline" 
          :default-selected-keys="['home']" 
          :defaultOpenKeys="['infomation','biddingManager','agreementManage','transportInfo']"
          class="leftMenu-panel">
            <a-menu-item class="leftMenu-panel-firstLine" style="text-align: center;">供应商系统 ⇆ </a-menu-item>
            <a-menu-item class="leftMenu-panel-link">
              <a-icon key="home" type="home" />
                首页
            </a-menu-item>
            <a-sub-menu key="infomation" style="background-color: transparent !important;" class="leftMenu-panel-withoutLink">
              <span slot="title"><a-icon type="desktop" /><span>通知公告</span></span>
               <a-menu-item key="notice" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('func', '')">
                  通知公告
                </a-menu-item>
                <a-menu-item key="win" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('link', '')">
                  中标公告
                </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="biddingManager" style="background-color: transparent !important;" class="leftMenu-panel-withoutLink">
              <span slot="title"><a-icon type="desktop" /><span>投标管理</span></span>
               <a-menu-item key="biddingInfo" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('func', '')">
                  招标信息
                </a-menu-item>
                <a-menu-item key="priceManage" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('link', '')">
                  计价管理
                </a-menu-item>
                <a-menu-item key="bidDocumentManage" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('outlink', '')">
                  标书管理
                </a-menu-item>
                <a-menu-item key="biddingRecorde" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('newWindow', '')">
                  投标记录
                </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="agreementManage" style="background-color: transparent !important;" class="leftMenu-panel-withoutLink">
              <span slot="title"><a-icon type="desktop" /><span>合同管理</span></span>
               <a-menu-item key="agreementManageSub" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('func', '')">
                  合同管理
                </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="transportInfo" style="background-color: transparent !important;" class="leftMenu-panel-withoutLink">
              <span slot="title"><a-icon type="desktop" /><span>运货单管理</span></span>
               <a-menu-item key="transportInfoSub" class="leftMenu-panel-withioutLink-link" @click="gotoFunc('func', '')">
                  运货单管理
                </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div> -->
      <div class="rightPanel">
        <div
          class="rightPanel-card"
          style="width: calc(50% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./通知公告.png"
              />
              <span class="rightPanel-card-title-left-name">通知公告</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 70%">通告名称</div>
              <div style="width: 30%">时间</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in infomations"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div
                style="width: 70%; font-size: 16px"
                class="rightPanel-card-table-line-text"
              >
                {{ item.name }}
              </div>
              <div style="width: 30%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(50% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./招标信息.png"
              />
              <span class="rightPanel-card-title-left-name">招标信息</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              style="display: none"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 10%">类型</div>
              <div style="width: 60%">招标内容</div>
              <div style="width: 30%">时间</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in biddingInfo"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 10%">{{ item.type }}</div>
              <div
                style="width: 60%; font-size: 16px"
                class="rightPanel-card-table-line-text"
              >
                {{ item.name }}
              </div>
              <div style="width: 30%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(70% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./中标信息.png"
              />
              <span class="rightPanel-card-title-left-name">中标信息</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              style="display: none"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 10%">类型</div>
              <div style="width: 50%">招标内容</div>
              <div style="width: 20%">状态</div>
              <div style="width: 20%">时间</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in winInfo"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 10%">{{ item.type }}</div>
              <div
                style="width: 50%; font-size: 16px"
                class="rightPanel-card-table-line-text"
              >
                {{ item.name }}
              </div>
              <div style="width: 20%" v-if="item.state == '1'">
                <img src="./已中标.png" />
                <span style="color: #4683eb">已中标</span>
              </div>
              <div style="width: 20%" v-else>
                <img src="./未中标.png" />
                <span style="color: #666">未中标</span>
              </div>
              <div style="width: 20%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(30% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./系统信息.png"
              />
              <span class="rightPanel-card-title-left-name">系统信息</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 30%">时间</div>
              <div style="width: 70%">系统信息</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in sysInfo"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 30%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
              <div
                style="width: 70%; font-size: 16px"
                class="rightPanel-card-table-line-text"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="rightPanel-footer">
          @该方案为奥哲网络科技有限公司版权所有
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import { utils } from "@cloudpivot/common";

import { Menu, Icon } from "@h3/antd-vue";
import { baseURL } from "tinymce";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";

@Component({
  name: "Login",
  components: {
    AIcon: Icon,
    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AMenuItemGroup: Menu.ItemGroup,
  },
})
export default class Home extends Vue {
  current: any[] = ["mail"];
  userInfo = {
    img: "./头像.png",
    name: "Admin",
  };

  infomations = [];

  biddingInfo = [];

  winInfo = [];

  sysInfo = [];

  gotoFunc(type: string, goto: string) {
    switch (type) {
      case "func":
        eval("this." + goto);
        break;
      case "link":
        this.$router.push({ name: goto }).catch((err: any) => {
          err;
        });

        break;
      case "outlink":
        window.location.href = goto;
        break;
      case "newWindow":
        window.open(goto, "_blank");
        break;
    }
    console.log(type, goto);
  }
  async created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = { id: "", name: "" };
    }
    var userinfo: any = await userApi.getUserInfo(user.id);

    if (userinfo.data) {
      this.userInfo = {
        img: userinfo.data.imgUrl == null ? "./头像.png" : userinfo.data.imgUrl,
        name: userinfo.data.name,
      };
    }

    let that = this;

    await Axios.get(
      "/api/zcxtHomePage/getXiaoXi?type=2"
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取公告消息失败");
      } else if (res.errmsg == "无数据") {
        alert("公告消息无数据");
      } else {
        that.infomations = [];
        for (var item in res.data) {
          that.infomations.push({
            id: item,
            dt: res.data[item].tongzhishijian,
            name: res.data[item].biaoti,
            link: res.data[item].pcUrl,
          });
        }
      }
    });

    await Axios.get(
      "/api/zcxtHomePage/getXiaoXi?type=3"
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取系统消息失败");
      } else if (res.errmsg == "无数据") {
        alert("系统消息无数据");
      } else {
        that.sysInfo = [];
        for (var item in res.data) {
          that.sysInfo.push({
            id: item,
            dt: res.data[item].tongzhishijian,
            name: res.data[item].biaoti,
            link: res.data[item].pcUrl,
          });
        }
      }
    });

    await Axios.get(
      "/api/zcxtHomePage/getZhongBiaoXinXi?userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取中标信息失败");
      } else if (res.errmsg == "无数据") {
        alert("中标信息无数据");
      } else {
        that.winInfo = [];
        for (var item in res.data.liebiao) {
          that.winInfo.push({
            id: item,
            dt: res.data.liebiao[item].expirationDate,
            name: res.data.liebiao[item].XMName,
            state: res.data.liebiao[item].Result,
            type: res.data.liebiao[item].leixing,
            link: res.data.liebiao[item].pcUrl,
          });
        }
      }
    });

    await Axios.get(
      "/api/zcxtHomePage/getZhaoBiaoXinXi?userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取招标信息失败");
      } else if (res.errmsg == "无数据") {
        alert("招标信息无数据");
      } else {
        that.biddingInfo = [];
        for (var item in res.data.liebiao) {
          that.biddingInfo.push({
            id: item,
            dt: res.data.liebiao[item].expirationDate,
            name: res.data.liebiao[item].XMName,
            type: res.data.liebiao[item].leixing,
            link: res.data.liebiao[item].pcUrl,
          });
        }
      }
    });
  }
}
</script>

<style lang="less" scoped>
.homepage {
  width: 100%;
  height: 100%;
  overflow: none;
  background-color: #f3f6fb;

  .nav {
    background-color: #4683eb;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-left {
      width: 50%;
      padding: 0 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 35px;
      }

      div {
        height: 24px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 10px;
      }
    }
    .nav-right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #fff;

      img {
        width: 22px;
        height: 22px;
      }

      .nav-right-name {
        padding: 0 8px;
      }

      .nav-right-middleline {
        height: 18px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 25px 0 10px;
      }

      .nav-right-operation {
        background-color: transparent;
        width: 150px;
        .nav-right-menu {
          background-color: transparent !important;
          color: #fff;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;

    .leftMenu {
      width: 224px;
      height: 100%;
      background-color: #273972;

      .leftMenu-panel {
        background-color: #273972 !important;
        border: none !important;

        .leftMenu-panel-firstLine {
          color: #dfe6fd;
          font-weight: 700;
          font-size: 18px;
          padding: 15px 0 !important;
          height: 66px;
        }
        .leftMenu-panel-link {
          color: #4c8bf8;
          font-size: 14px;
        }
        .leftMenu-panel-link::after {
          border: none !important;
        }
        .ant-menu-item-selected.leftMenu-panel-link {
          background-color: rgba(223, 230, 253, 0.13);
        }
        .leftMenu-panel-withoutLink {
          color: rgba(223, 230, 253, 0.46);
          font-size: 14px;
          .leftMenu-panel-withioutLink-link {
            color: rgba(223, 230, 253, 1);
            font-size: 14px;
          }
        }
      }
    }
    .rightPanel {
      width: 100%;
      height: 100%;
      padding: 12px;
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      .rightPanel-card {
        margin: 12px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
        padding: 16px 21px;
        overflow: hidden;

        .rightPanel-card-title {
          border-bottom: 1px dotted rgba(83, 112, 239, 0.22);
          padding: 0 4px 15px 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .rightPanel-card-title-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .rightPanel-card-title-left-img {
              height: 24px;
              width: 24px;
            }
            .rightPanel-card-title-left-name {
              font-size: 20px;
              font-weight: 700;
              margin-left: 5px;
            }
          }

          .rightPanel-card-title-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            cursor: pointer;

            .rightPanel-card-title-right-text {
              font-size: 13px;
              color: #737278;
              letter-spacing: 1px;
            }
            .rightPanel-card-title-right-text:hover {
              color: rgb(130, 185, 248);
            }
            .rightPanel-card-title-right-icon {
              height: 13px;
              width: 13px;
              margin-left: 2px;
            }
          }
        }

        .rightPanel-card-table {
          width: 100%;
          height: 290px;
          overflow: auto;

          .rightPanel-card-table-firstline {
            color: #aaa;
            font-size: 14px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 16px 17px 13px 17px;

            .rightPanel-card-table-firstline-name {
              width: 70%;
            }
            .rightPanel-card-table-firstline-dt {
              width: 30%;
            }
          }

          .rightPanel-card-table-line {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            padding: 11px 16px;

            .rightPanel-card-table-line-text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 5px;
            }
          }

          .rightPanel-card-table-line:hover {
            background-color: #d6e5ff;
          }
        }
      }

      .rightPanel-footer {
        position: absolute;
        width: calc(100% - 240px);
        bottom: 40px;
        text-align: center;
        color: #999999;
      }
    }
  }
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  background-color: #fff !important;
}
.homepage .nav .nav-right .nav-right-operation .nav-right-menu {
  border: none;
}
.ant-menu-submenu > .ant-menu {
  background-color: #fff;
  border-radius: 4px;
}
</style>

<style lang="less">
.homepage .ant-menu-submenu > .ant-menu {
  background-color: transparent !important;
}
.homepage .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: transparent !important;
}

.homepage
  .content
  .leftMenu
  .leftMenu-panel
  .leftMenu-panel-withoutLink
  .leftMenu-panel-withioutLink-link:hover {
  background-color: #4683eb;
}
</style>